<template>
  <div class="app-container">
    <div>
      <el-input v-model="searches" style="width: 200px; margin-right: 10px; margin-bottom: 5px;" placeholder="搜索" clearable></el-input>
      <el-button type="primary" @click = "search()">搜索</el-button>
      <el-button type="primary" @click = "addModal()">添加</el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column width="50px" align="center" label="ID">
        <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="所属小区">
        <template slot-scope="scope">
          <span>{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>

      <el-table-column width="80px" align="center" label="栋数">
        <template slot-scope="scope">
          <span>{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>

      <el-table-column width="140px" align="center" label="房产编码">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>

      <el-table-column width="140px" align="center" label="房产名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="户主名称">
        <template slot-scope="scope">
          <span>{{ scope.row.ownerName }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="联系方式">
        <template slot-scope="scope">
          <span>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>

      <el-table-column width="80px" align="center" label="房间数">
        <template slot-scope="scope">
          <span>{{ scope.row.roomNum }}</span>
        </template>
      </el-table-column>

      <el-table-column width="80px" align="center" label="单元">
        <template slot-scope="scope">
          <span>{{ scope.row.unit }}</span>
        </template>
      </el-table-column>

      <el-table-column width="80px" align="center" label="楼层">
        <template slot-scope="scope">
          <span>{{ scope.row.floor }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="入住时间">
        <template slot-scope="scope">
          <span>{{ scope.row.liveTime }}</span>
          <!-- <span>{{ parseTime(scope.row.liveTime, '{y}-{m}-{d} {h}:{i}') }}</span> -->
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="update(scope.row)" circle></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="delhouse(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="35%">
      <!-- 添加滚动条 -->
      <el-scrollbar style="height: 350px;">
        <el-form ref="form" label-width="80px">

        <el-form-item label="所属小区">
          <input type="hidden" v-model="houseForm.id" />
          <el-cascader
            v-model="handles"
            :options="communities"
            placeholder="请选择所属小区和栋数"
            :props="{value: 'id', label: 'name', children: 'buildings', expandTrigger: 'hover'}"
            @change="handleChange"
            ></el-cascader>
        </el-form-item>

          <el-form-item label="房产编码">
            <el-col :span="20">
              <el-input  placeholder="请输入房产编码" v-model="houseForm.code"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="房产名称">
            <el-col :span="20">
              <el-input placeholder="请输入房产名称" v-model="houseForm.name"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="户主名称">
            <el-col :span="20">
              <el-input  placeholder="请输入户主名称" v-model="houseForm.ownerName"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="联系方式">
            <el-col :span="20">
              <el-input  placeholder="请输入联系方式" v-model="houseForm.telephone"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="单元">
            <el-col :span="20">
              <el-input  placeholder="请输入单元名" v-model="houseForm.unit"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="房间数">
            <el-col :span="20">
              <el-input  placeholder="请输入房间数" v-model="houseForm.roomNum"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="楼层">
            <el-col :span="20">
              <el-input  placeholder="请输入楼层数" v-model="houseForm.floor"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="入住时间">
            <el-col :span="20">
              <el-date-picker type="datetime" placeholder="选择日期时间" v-model="houseForm.liveTime" style="width: 100%;"
                :picker-options="pickerOptions" value-format="yyyy-MM-ddTHH:mm:ss"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
      </el-scrollbar> <!-- end 滚动条 -->

      <span slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="saveInfo()">保 存</el-button>
      </span>
    </el-dialog> <!-- end 对话框 -->

    <!-- page-size 默认每页显示条数 -->
    <div class="block">
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import myUtil from '../../../utils/myUtil'

export default {
  name: 'houseList',
  data() {
    return {
      list: [],
      title: "添加",
      communities: [],
      handles: [],
      searches:"",//搜索条件
      houseForm:{
        id: null,
        communityName: "",
        communityId: "",
        buildingId: "",
        buildingName: "",
        code: "",
        name: "",
        ownerName: "",
        telephone: "",
        unit: "",
        roomNum: "",
        floor: "",
        liveTime: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      total: 0, // 总条数
      totalPage: 0, // 总页数
      curPage: 1, // 当前页
      rows: 3, // 每页显示条数
      isShow: false,
      searches: ""
    }
  },
  methods: {
    getList() {
      var self = this;
      this.axios({
        method: 'get',
        url: myUtil.url + '/tb-house/listPage',
        params: {
          "currentPage": self.curPage,
          "pageSize": self.rows,
          "direction": self.searches

        }
      }).then(function(rs){
        //console.log(rs);
        self.list = rs.data.info;
        self.total = rs.data.total;
        self.totalPage = rs.data.totalPage;
      });
    },
    getCommunities() {
      var self = this;
      this.axios.get(myUtil.url + "/tb-community/getCWithB")
                .then((rs) => {
                  //console.log(rs);
                  //console.log(rs.data);
                  self.communities = rs.data;
                })
    },
    handleChange(handles) {
          //console.log(handles);
          this.houseForm.communityId = handles[0];
          this.houseForm.buildingId = handles[1];
    },
    addModal() {
      // 打开模态框
      this.isShow = true;
      // 更改模态框标题
      this.title = "新增房产信息";
      // 清除表单元素
      this.houseForm.id= null;
      this.handles = "";
      this.houseForm.communityId = "";
      this.houseForm.communityName= "";
      this.houseForm.buildingId = "",
      this.houseForm.buildingName= "";
      this.houseForm.code= "";
      this.houseForm.name= "";
      this.houseForm.ownerName= "";
      this.houseForm.telephone= "";
      this.houseForm.unit= "";
      this.houseForm.roomNum= "";
      this.houseForm.floor= "";
      this.houseForm.liveTime= "";
    },
    update(x) { // 修改信息模态框
      this.isShow = true;
      this.title = "修改房产信息";
      this.houseForm.id= x.id;
      this.handles = [x.communityId, x.buildingId];
      this.houseForm.communityId = x.communityId;
      this.houseForm.communityName= x.communityName;
      this.houseForm.buildingId = x.buildingId,
      this.houseForm.buildingName= x.buildingName;
      this.houseForm.code= x.code;
      this.houseForm.name= x.name;
      this.houseForm.ownerName= x.ownerName;
      this.houseForm.telephone= x.telephone;
      this.houseForm.unit= x.unit;
      this.houseForm.roomNum= x.roomNum;
      this.houseForm.floor= x.floor;
      this.houseForm.liveTime= x.liveTime;
    },
    delhouse(x) {
      var self = this;
      this.$confirm('此操作将永久删除该房产信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(myUtil.url + "/tb-house/del/" + x.id).then((rs) => {
          //console.log(rs);
          if(rs.data.info == "删除成功"){
            this.$message({
            type: 'success',
            message: '删除成功!'
            });
            this.getList();
          }
        })
      }).catch(() => {
        this.$message({
      	type: 'info',
      	message: '已取消删除'
        });
      });

    },
    saveInfo() { // 保存
      var self = this;
      if(this.title == "新增房产信息"){
        //console.log(this.houseForm);
        this.axios.post(myUtil.url + "/tb-house/add", self.houseForm).then((data) => {
          //console.log(data);
          this.$notify({
            title: '成功',
            message: data.data.info,
            type: 'success',
            duration: 2000
          });
          if (data.data.info == "添加成功") {
            // 关闭模态框
            self.isShow = false;
            // 刷新
            self.getList();
          }
        })
      } else if(this.title == "修改房产信息"){
        //console.log(this.houseForm);
        this.axios.put(myUtil.url + "/tb-house/update", self.houseForm).then((data) => {
          //console.log(data);
          this.$notify({
            title: '成功',
            message: data.data.info,
            type: 'success',
            duration: 2000
          });
          if (data.data.info == "修改成功") {
            // 关闭模态框
            self.isShow = false;
            // 刷新
            self.getList();
          }
        })
      }
    },
    handleCurrentChange(v){ // 当前页触发事件
      this.curPage = v;
      this.getList();
    },
    selectPage(v) { // 用户选择页数
      this.rows = v;
      this.getList();
    },
    search(){
      this.curPage = 1;
      this.getList();
    }
  },
  mounted() {
    this.getList();
    this.getCommunities();
  }
}
</script>

<style scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

</style>
